<template>
  <div>
    <el-button @click="showDialog(1)" type="primary">新增用户</el-button>
    <br>
    <br>
    <el-table
    :data="tableData"
    v-loading="loading"
    :stripe="true"
    :border=true
    style="width: 100%" >
      <el-table-column prop="name" label="用户名"></el-table-column>
      <el-table-column prop="userName" label="姓名"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <span style="color: #67C23A" v-if="scope.row.status">正常</span>
          <span style="color: #F56C6C" v-else> 禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="300"></el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" :disabled="!scope.row.status" @click="handleDelete(scope.$index, scope.row)">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 20px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRow">
      </el-pagination>
		</div>

    <el-dialog width="700px" title="新增用户" :visible.sync="dialogFormVisible">
      <el-form :model="form" :label-width="formLabelWidth">
        <el-form-item label="用户名" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" >
          <el-input v-model="form.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.roleIdList" style="width:100%;" multiple placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status"></el-switch>
        </el-form-item>
        <el-form-item label="密码">默认密码132456 <el-button type="text" style="margin-left: 10px;" v-if="resetBtn" @click="resetPwd(form.id)">重置密码</el-button></el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="onSubmit">保 存</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import { getSysUserPage, saveSysUser, updateSysUser, disableSysUser, resetSysPwd, roleSyslist } from '../../api/apis'
  export default {
    data() {
      return {
        dialogFormVisible: false,
        formLabelWidth: '120px',
        tableData: [],
        loading: true,
        currentPage: 1,
	      pageSize: 15,
        totalRow: 0,
        type: null,
        form: {
          id: '',
          name: '',
          userName: '',
          roleIdList: [],
          status: true
        },
        options: [],
        resetBtn: false,
      }
    },
    created: function(){
      this.handleCurrentChange(this.currentPage);
      this.getRoleSyslist();
    },
    methods: {
      /* 单页pageSize 改变时会触发 */
      handleSizeChange(val) {
				this.pageSize = val;
				this.handleCurrentChange(1);
			},
			handleCurrentChange(val) {
        // console.log(val)
				this.loading = true;
				this.currentPage = val;
				let data = {
					pageNum: val,
					limit: this.pageSize
				}
				getSysUserPage(data).then((res)=> {
					this.loading = false;
					if(res.status === 200 ){
						if(res.data.code == 0){
              // console.log(res.data)
							this.totalRow = res.data.count;
							this.tableData = res.data.data;
						}else{
							this.$message.error(res.data.msg)
						}
					}
				})
				.catch(function (error) {
					console.log(error);
        });
      },
      /**获取用户角色列表  */
      getRoleSyslist(){
        roleSyslist().then( (res)=> {
					if(res.status === 200 ){
						if(res.data.code == 0){
              // console.log(res.data.data)
              this.options = res.data.data
						}else{
							this.$message.error(res.data.msg)
						}
					}
				})
				.catch(function (error) {
					console.log(error);
				});
      },
      /* 显示新增弹窗 */
      showDialog(val){
        this.type = val;
        this.resetBtn = false;
        this.form = {};
        this.form.status = true;
        this.dialogFormVisible = true;
      },
      /* 保存用户信息 */ 
      onSubmit(){
        if(this.type == 1){
          saveSysUser(this.form).then((res)=>{
            console.log(res)
            if(res.status === 200 ){
              if(res.data.code == 0){
                this.$message({
                  type: 'success',
                  message: '新增用户成功!'
                });
                this.dialogFormVisible = false;
                this.handleCurrentChange(1);
              }
            }
          })
          .catch(function(error){
            console.log(error)
          })
        }else{
          updateSysUser(this.form).then((res)=>{
            // console.log(res)
            if(res.status === 200 ){
              if(res.data.code == 0){
                this.$message({
                  type: 'success',
                  message: '修改用户成功!'
                });
                this.dialogFormVisible = false;
                this.handleCurrentChange(1);
              }
            }
          })
          .catch(function(error){
            console.log(error)
          })
        }
      },
      /** 编辑按钮 */
      handleEdit( row ) {
        let arr = row.roleIds.split(',').map((value)=>{
          return parseInt(value);
        })
        this.dialogFormVisible = true;
        this.type = 2;
        this.resetBtn = true;
        this.form = {
          id: row.id,
          name: row.name,
          userName: row.userName,
          roleIdList: arr,
          status: row.status
        }
      },
      handleDelete(index, row) {
        this.$confirm('确定要禁用该用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          disableSysUser({ id: row.id }).then((res)=>{
            if(res.status == 200){
              if(res.data.code == 0){
                // console.log(res.data)
                this.$message({
                  type: 'success',
                  message: '已禁用!'
                });
                this.handleCurrentChange(this.currentPage);
              }
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      },
      /** 重置密码 */
      resetPwd(id){
        this.$confirm('确定要禁用该用户吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          resetSysPwd({id: id}).then( (res)=> {
            if(res.status == 200){
              if(res.data.code == 0){
                this.$message({
                  type: 'success',
                  message: '密码已重置!'
                });
              }
            }
          })
          .catch(function (error) {
            console.log(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });
      }
    }
  }
</script>
 